<template>
  <a-card style="margin-top: 24px" :bordered="false" title="活动返现查询">
    <div class="search-tools">
      <a-row>
        <a-col :span="8">
          <div class="searchItem">
            <span>SN设备号:</span>
            <a-input
              placeholder="SN设备号"
              class="toolitem"
              v-model="listQuery.data.sncode"
            />
          </div>
        </a-col>
        <a-col :span="8">
          <div class="searchItem">
            <span>返现服务商会员编号:</span>
            <a-input
              placeholder="返现服务商会员编号"
              class="toolitem"
              v-model="listQuery.data.toMemberNo"
            />
          </div>
        </a-col>
        <a-col :span="8">
          <div class="searchItem">
            <span>返现类型:</span>

            <a-select class="toolitem" v-model="listQuery.data.remark">
              <a-select-option v-for="d in returnMoneyTypes" :key="d.value">{{
                d.label
              }}</a-select-option>
            </a-select>
          </div>
        </a-col>

        <a-col :span="8">
          <div class="searchItem">
            <span>触发返现日期:</span>

            <a-range-picker
              v-model="touchDate"
              @change="
                (date, dateString) =>
                  onChange(
                    date,
                    dateString,
                    'triggerStartDate',
                    'triggerEndDate'
                  )
              "
              class="toolitem"
              format="YYYYMMDD"
            />
          </div>
        </a-col>

        <a-col :span="8">
          <div class="searchItem">
            <span>实际入账日期:</span>

            <a-range-picker
              v-model="actualDate"
              @change="
                (date, dateString) =>
                  onChange(date, dateString, 'actualStartDate', 'actualEndDate')
              "
              class="toolitem"
              format="YYYYMMDD"
            />
          </div>
        </a-col>
        <a-col :span="8">
          <div class="searchItem">
            <span>订单状态:</span>

            <a-select class="toolitem" v-model="listQuery.data.statue">
              <a-select-option v-for="d in orderTypes" :key="d.value">{{
                d.label
              }}</a-select-option>
            </a-select>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="searchItem" style="margin: 30px 0">
            <a-button class="btnStyle" @click="resetHandle()">重置</a-button>
            <a-button type="primary" class="btnStyle" @click="searchHandle()"
              >查询</a-button
            >
          </div>
        </a-col>
      </a-row>
    </div>
    <!-- table -->
    <a-table
      :columns="columns"
      :dataSource="dataSource"
      :loading="tableLoading"
      :pagination="false"
      :rowKey="(record, index) => index"
      :scroll="{ x: 2300 }"
      bordered
    >
      <template slot-scope="record" slot="status">
        {{
          record.status === "init"
            ? "待入账"
            : record.status === "fail"
            ? "关闭"
            : "入账完成"
        }}
      </template>
      <span slot="amount" slot-scope="record"
        >{{ (record.amount / 100).toFixed(2) }}元</span
      >
    </a-table>
    <a-pagination
      v-if="total"
      @change="onPageChange"
      :current="listQuery.page"
      :total="total"
      :pageSize="listQuery.pageSize"
      style="margin-top: 10px; text-align: center"
    />
  </a-card>
</template>

<script>
const columns = [
  {
    title: "订单号",
    dataIndex: "order_no",
    fixed: "left",
    width: 220,
  },
  {
    title: "返现服务商会员编号",
    dataIndex: "toMemberNo",
    fixed: "left",
  },
  {
    title: "返现服务商名称",
    dataIndex: "toMemberName",
  },
  {
    title: "活动编号",
    dataIndex: "marketNo",
  },
  {
    title: "SN设备号",
    dataIndex: "sncode",
    width: 220,
  },
  {
    title: "所属商户名",
    dataIndex: "snMerchantName",
  },
  {
    title: "触发返现时间",
    dataIndex: "triggerDate",
    width: 220,
  },
  {
    title: "实际入账时间",
    dataIndex: "actualDate",
    width: 220,
  },
  {
    title: "所属一级会员编号",
    dataIndex: "firstAgentMemberNo",
  },
  {
    title: "返现金额",
    scopedSlots: { customRender: "amount" },
    key: "amount",
    width: 150,
  },
  {
    title: "返现类型",
    dataIndex: "remark",
    width: 150,
  },
  {
    title: "订单状态",
    scopedSlots: { customRender: "status" },
    fixed: "right",
    width: 150,
  },
];
export default {
  data() {
    return {
      columns,
      tableLoading: false,
      dataSource: [],
      actualDate: [],
      touchDate: [],
      total: 0,
      listQuery: {
        page: 1,
        pageSize: 10,
        data: {
          sncode: "",
          toMemberNo: "",
          remark: "ALL",
          triggerStartDate: "",
          triggerEndDate: "",
          actualStartDate: "",
          actualEndDate: "",
          statue: "ALL",
        },
      },
      returnMoneyTypes: [
        { label: "全部", value: "ALL" },
        { label: "激活", value: "激活" },
        { label: "流量费", value: "流量费" },
        { label: "服务费", value: "服务费" },
      ], // 返现类型

      orderTypes: [
        { label: "全部", value: "ALL" },
        { label: "待入账", value: "init" },
        { label: "入账完成", value: "success" },
        { label: "关闭", value: "fail" },
      ],
    };
  },
  activated() {
    this.searchHandle();
  },
  methods: {
    onChange(date, dateString, startDate, endDate) {
      this.listQuery.data[startDate] = dateString[0];
      this.listQuery.data[endDate] = dateString[1];
    },

    searchHandle() {
      this.tableLoading = true;
      this.$axios
        .post("/agent/withdraw/market/cashBackList", this.listQuery)
        .then((res) => {
          if (res.data.code === "OK") {
            this.dataSource = res.data.list || [];
            this.total = res.data.total;
          } else {
            this.dataSource = [];
            this.total = 0;
            this.$message.error(res.data.message);
          }
          this.tableLoading = false;
        });
    },

    onPageChange(page, size) {
      this.listQuery.page = page;
      this.listQuery.pageSize = size;
      this.searchHandle();
    },

    resetHandle() {
      this.listQuery = {
        page: 1,
        pageSize: 10,
        data: {
          sncode: "",
          toMemberNo: "",
          remark: "ALL",
          triggerStartDate: "",
          triggerEndDate: "",
          actualStartDate: "",
          actualEndDate: "",
          statue: "ALL",
        },
      };
      this.actualDate = [];
      this.touchDate = [];
      this.searchHandle();
    },
  },
};
</script>


<style lang="less" scoped>
.searchItem {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  span {
    // margin-right: 15px;
    font-weight: bold;
    width: 30%;
  }

  .toolitem {
    width: 60%;
  }

  .btnStyle {
    width: 120px;
    margin-right: 30px;
  }
}
</style>